<template>
	<view>
		<view class="content">
			<van-tabs :active="active" color="var(--theme-color)" title-inactive-color="#666666" title-active-color="var(--theme-color)" sticky @click="active=$event.detail.name">
				<van-tab title="全部" name="0">
					<van-divider hairline />
					<view class="content-item flex-column-between">
						<view class="flex-between" style="width: 100%;">
							<label style="font-size: 28upx;">订单名称</label>
							<label>2020.02.12</label>
						</view>
						<view class="flex-between" style="width: 100%;">
							<label>支付</label>
							<label>-300</label>
						</view>
					</view>
					<van-divider hairline />
					<view class="content-item flex-column-between">
						<view class="flex-between" style="width: 100%;">
							<label style="font-size: 28upx;">订单名称</label>
							<label>2020.02.12</label>
						</view>
						<view class="flex-between" style="width: 100%;">
							<label>支付</label>
							<label>-300</label>
						</view>
					</view>
					<van-divider hairline />
				</van-tab>
				<van-tab title="支付明细" name="1">

				</van-tab>
				<van-tab title="提现明细" name="2">

				</van-tab>
				<van-tab title="充值明细" name="3">
	
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				active:'0'
			}
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.content{
		margin: 32upx;
		padding: 32upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		.content-item{
			font-size: 24upx;
			font-weight: 500;
			color: #333333;
			height: 94upx;
		}
	}
</style>
